<!DOCTYPE html>
<html lang="en">
<head>
<title>Vacation Rentals</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
	<div class="navbar navbar-default" role="navigation">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#"><img src="images/logo.png" /></a>

		</div>
		<div class="collapse navbar-collapse">

			<ul class="nav navbar-nav">
				<li id="header-search"><i class="glyphicon glyphicon-search"></i><input
					type="text" class="form-control" placeholder="Where are you going?"
					autocomplete="off"></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown"> BROWSE <b class="caret"></b>
				</a>
					<ul class="dropdown-menu">
						<li><i class="glyphicon glyphicon-heart"></i><a href="#">Popular</a></li>
						<li><i class="glyphicon glyphicon-user"></i><a href="#">Friend</a></li>
						<li><i class="glyphicon glyphicon-tint"></i><a href="#">Neighborhoods</a></li>
					</ul></li>
			</ul>

			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">SIGN UP</a></li>
				<li><a href="#">LOG IN</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown"> HELP <b class="caret"></b>
				</a>
					<ul class="dropdown-menu">
						<li><a href="#">Visit the Help Center</a></li>
						<li><a href="#">Getting Started Guide</a></li>
						<li><a href="#">How do I create an account</a></li>
					</ul></li>
			</ul>


		</div>
	</div>

	<div class="head">
		<div id="myCarousel" class="carousel slide" data-ride="carousel">
			<!-- Carousel indicators -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ol>
			<!-- Carousel items -->
			<div class="carousel-inner">
				<div class="item active">

					<img src="images/slide1.jpg">
					<div class="carousel-caption">
						<h3>First slide label</h3>
						<p>Lorem ipsum dolor sit amet consectetur…</p>
					</div>
				</div>
				<div class="item">

					<img src="images/slide1.jpg">
					<div class="carousel-caption">
						<h4>Slide1</h4>
						<h3>Second slide label</h3>
						<p>Aliquam sit amet gravida nibh, facilisis gravida…</p>
					</div>
				</div>
				<div class="item">

					<img src="images/slide1.jpg">
					<div class="carousel-caption">
						<h3>Third slide label</h3>
						<p>Praesent commodo cursus magna vel…</p>
					</div>
				</div>
			</div>
			<!-- Carousel nav -->
			<a class="carousel-control left" href="#myCarousel" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left"></span>
			</a> <a class="carousel-control right" href="#myCarousel"
				data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span>
			</a>
		</div>

		<div class="row find-place-to-stay">
			<div class="col-lg-12">
				<h1 class="special-text1">Find a place to stay.</h1>
				<h2 class="special-text2">Rent from people in over 34,000 cities and
					190 countries.</h2>
				<form class="search-form">
					<input type="text" class="form-control search-1"
						placeholder="Where do you want to go?" autocomplete="off"> <input
						type="date" class="form-control check-in-out"
						placeholder="Check in" autocomplete="off"> <input type="date"
						class="form-control check-in-out" placeholder="Check out"
						autocomplete="off"> <select class="dropdown dropdown-toggle">
						<option class="option">1 Guest</option>
						<option class="option">2 Guest</option>
						<option class="option">3 Guest</option>
						<option class="option">4 Guest</option>
						<option class="option">5 Guest</option>
						<option class="option">6 Guest</option>
						<option class="option">7 Guest</option>
					</select>

					<button type="button" class="btn btn-primary">Search</button>
				</form>
			</div>
		</div>
	</div>

	<div class="page-container">
		<div class="row">
			<h1>Neighborhood Guides</h1>
			<h2>Not sure where to stay? We've created neighborhood guides for cities all around the world.</h2>
		</div>
	</div>
	<div class="page-container">
		<div class="row">
			<div class="col-md-4">
				<p>
				
				
				<div class="media-photo barcelona"></div>
				</p>
			</div>
			<div class="col-md-4">
				<p>
				
				
				<div class="media-photo barcelona"></div>
				</p>
			</div>
			<div class="col-md-4">
				<p>
				
				
				<div class="media-photo barcelona"></div>
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4">
				<p>
				
				
				<div class="media-photo barcelona"></div>
				</p>
			</div>
			<div class="col-md-4">
				<p>
				
				
				<div class="media-photo barcelona"></div>
				</p>
			</div>
			<div class="col-md-4">
				<p>
				
				
				<div class="media-photo barcelona"></div>
				</p>
			</div>
		</div>
		<div class="row">
			<div class="text-center"><a class="text-copy" href="#">All neighborhood guides</a></div>
		</div>
	</div>
	
	<div class="page-container">
		<div class="row">
			<div class="col-md-4">
				<h3 class="text-special">
					Travel
				</h3>
				<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 190 countries.</p>
				<a href="#">See how to travel on Airbnb</a>
			</div>
			<div class="col-md-4">
				<h3 class="text-special">
					Host
				</h3>
				<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
				<a href="#">Learn more about hosting</a>
			</div>
			<div class="col-md-4">
				<h3 class="text-special">
					Trust and Safety
				</h3>
				<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
				<a href="#">Learn about trust at Airbnb</a>
			</div>
		</div>
	</div>
	<div class="page-container">
		<div class="row">
			<div class="col-md-3">
			a
			</div>
			<div class="col-md-3">
			a
			</div>
			<div class="col-md-3">
			a
			</div>
			<div class="col-md-3">
			a
			</div>
		</div>
	</div>
</body>
</html>